<template>
  <div class="event-container">
    <div class="event-header van-hairline--bottom">
      <van-card
        tag="推荐"
        :desc="data.begintime"
        :title="data.name"
        :thumb="data.thumb"
        custom-class="event-list-item van-hairline--bottom"
      >
        <view
          slot="bottom"
          class="van-card--bottom"
        >
          <van-icon name="like" /> 1922关注
        </view>
      </van-card>
    </div>

    <van-popup
      :show="show"
      @close="onClose"
      round
      closeable
      close-icon="cross"
      position="bottom"
      custom-class="matchitem-popup"
    >

      <van-radio-group
        :value="checkedItemId"
        @change="onItemChange"
      >
        <van-cell-group custom-class="matchitem-group">
          <van-cell
            :title="item.title"
            :data-name="item.id+ ''"
            :label="item.description"
            :value="item.price"
            :border="false"
            :custom-class="checkedItemId===item.id+''?'matchitem-group-cell matchitem-group-cell__checked':'matchitem-group-cell'"
            v-for="(item,index) in items"
            :key="index"
            clickable
            @click="onItemClick"
          >
            <van-radio :name="item.id+ ''" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>

      <div class="matchitem-popup__bottom">
        <div class="match-enroll">
          <div class="match-enroll__price">{{matchItemPrice}}</div>
          <van-button
            round
            size="small"
            type="danger"
            @click="onClickEnroll"
          >报名</van-button>
        </div>
      </div>
    </van-popup>

    <van-goods-action>
      <van-goods-action-icon
        icon="like-o"
        text="关注"
      />
      <van-goods-action-icon
        icon="more-o"
        text="参赛宣言"
      />
      <van-goods-action-icon
        icon="label-o"
        text="参加过"
      />
      <van-goods-action-button
        text="点评"
        type="warning"
      />
      <van-goods-action-button
        text="一键报名"
        @click="showPopup"
      />
    </van-goods-action>
  </div>
</template>

<script>
import card from '@/components/card'

export default {
  components: {
    card
  },

  data () {
    return {
      checkedItemId: 0,
      show: false,
      data: {
        name: 'test',
        thumb: 'http://oss.youmbe.com/attachments/avatar/29.jpg',
        begintime: '2019-09-21',
        description: 'test',
        likes: '22'
      },
      items: [
        {
          id: 1,
          title: '男、女个人马拉松单日赛（食宿自理）',
          price: '￥100',
          description: '包括参赛包和黔东南苗族侗族自治州旅游通票'
        },
        {
          id: 2,
          title: '男、女个人马拉松单日赛（含食宿）',
          price: '￥500',
          description:
            '报名费包括组委会提供的比赛前一日的食宿费用和比赛当日的早、中餐费用以及参赛包和黔东南州旅游通票'
        },
        {
          id: 3,
          title: '男、女个人超100公里三日赛（食宿自理）',
          price: '￥200',
          description:
            '包含组委会提供的交通转场费用、参赛包和黔东南苗族侗族自治州旅游通票，转场需前往组委会指定的地点乘坐转场大巴'
        },
        {
          id: 4,
          title: '男、女个人超100公里三日赛（含食宿）',
          price: '￥1480',
          description:
            '报名费包含组委会提供的比赛期间食宿与交通费用以及参赛包和黔东南州旅游通票'
        }
      ]
    }
  },

  created () {
    console.log('test created')
  },
  computed: {
    matchItemPrice () {
      let currentTarget = this.items.find(
        v => v.id + '' === this.checkedItemId
      )
      console.log(this.checkedItemId)
      console.log(currentTarget)
      if (currentTarget) {
        return currentTarget.price
      }
      return ''
    }
  },
  methods: {
    onItemChange (event) {
      this.checkedItemId = event.mp.detail
      console.log('onItemClick', this.checkedItemId)
    },
    onItemClick (event) {
      console.log(event)
      console.log(event.mp)
      const { name } = event.mp.currentTarget.dataset
      this.checkedItemId = name
      console.log('onItemClick', this.checkedItemId)
    },
    showPopup () {
      this.show = true
    },
    onClose () {
      this.show = false
    },
    onClickEnroll () {
      let id = this.checkedItemId
      wx.navigateTo({
        url: '/pages/enroll/main?id=' + id
      })
      console.log('onClickEnroll')
    }
  }
}
</script>

<style lang="less">
.event-container {
  padding-top: 60px;
  position: relative;
}
.van-icon,
.van-icon::before {
  display: block !important;
}
.event-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.matchitem-popup {
  // height: 60vh;
  width: 100%;
  padding: 50px 0;
  overflow-y: hidden !important;
  &__bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    .match-enroll {
      padding: 0 15px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &__price {
        color: #ff6600;
      }
    }
  }
}
.matchitem-group {
  height: 50vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 15px;
  &-cell {
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #f1f2f3;
    background-color: #f1f2f3 !important;
    .van-cell__value {
      flex: none;
    }
    .van-radio__icon {
      .van-icon {
        display: none !important;
      }
    }
    &__checked {
      border-color: #f7a031;
      background-color: rgba(245, 175, 80, 0.2) !important;
      .van-cell__title,
      .van-cell__label,
      .van-cell__value {
        color: #ff6600;
      }
    }
  }
}

.event-list-item {
  &.van-card {
    padding: 10px 15px;
    background: transparent;
  }
  .van-card__img {
    border-radius: 5px;
  }
  .van-card__title {
    font-size: 16px;
    line-height: 24px;
    font-weight: normal;
  }
  .van-card__desc {
    font-size: 10px;
  }
  .van-card__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .van-card--bottom {
    color: #bccce5;
    display: flex;
    align-items: center;
    .van-icon {
      margin-right: 3px;
    }
  }
  .van-card--footer {
    padding: 5px 5px 0 100px;
    text-align: left;
    display: flex;
    align-items: center;
    .van-tag {
      margin-right: 5px;
    }
  }
}

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.log-item {
  margin: 10rpx;
}
</style>
